import React from 'react'
import Page from '../components/Page'

// function Contributors() {
//   const [contributors, setContributors] = React.useState([])

//   React.useEffect(() => {
//     fetch('https://api.github.com/repos/carbon-app/carbon/contributors?per_page=100')
//       .then(response => response.json())
//       .then(contributors =>
//         setContributors(contributors.filter(contributor => !contributor.login.endsWith('[bot]')))
//       )
//   }, [])

//   return (
//     <div>
//       {contributors.map(contributor => (
//         <a key={contributor.id} href={contributor.html_url} target="_blank" rel="noreferrer">
//           <img alt={contributor.login} className="contributor" src={contributor.avatar_url} />
//         </a>
//       ))}
//       <style jsx>
//         {`
//           .contributor {
//             border-radius: 50%;
//             border: 2px solid white;
//             width: 32px;
//             height: 32px;
//             margin-right: 12px;
//             transition: all 300ms ease;
//             margin-bottom: 8px;
//           }

//           .contributor:hover {
//             opacity: 0.8;
//           }
//         `}
//       </style>
//     </div>
//   )
// }

export default function About() {
  return (
    <Page>
      <div className="about">
        <div className="mb4">
          <h2>What does this do?</h2>
          <p>PromptShow lets you create and share beautiful images of your LLM Prompts</p>
          <p>
            You know all of those code screenshots you see on Twitter? {' '}
            <span role="img" aria-label="Palette">
              🎨
            </span>
          </p>
        </div>
        <div className="mb4">
          <h2>How do I use it?</h2>
          <h4 className="mb0 mt3">Import</h4>
          <p className="mb1 mt2">There are a few different ways to import LLM Prompts into PromptShow:</p>
          <ul className="mt0 mb3">
            <li>Drop a file into the editor</li>
            <li>
              Append a GitHub gist id to the url (
              <a className="link" href="/3208813b324d82a9ebd197e4b1c3bae8">
                example
              </a>
              )
            </li>
            <li>Paste your prompt directly</li>
          </ul>
          <h4 className="mb0 mt4">Customization</h4>
          <p className="mt2 mb3">
            Once you&apos;ve got all of your prompt into PromptShow, you can customize your image by
            changing the syntax theme, background color/image, window theme, or padding.
          </p>
          <p className="mt2 mb3">
            You can even drop an image file onto the editor to set the background to that image.
            Give it a try!
          </p>
          <h4 className="mb0 mt4">Export/Sharing</h4>
          <p className="mt2 mb3">
            After you&apos;ve customized your image you can Tweet a link to the image, or save it
            directly.
          </p>
          <p className="mt2 mb3">
            If you use the &apos;Tweet&apos; button, PromptShow will automatically make your image
            accessible. However, if you want to manually tweet your PromptShow image, please check out (
            <a
              className="link"
              href="https://help.twitter.com/en/using-twitter/picture-descriptions"
            >
              how to make your Twitter images accessible
            </a>
            ).
          </p>
          <p className="mt2 mb3">
            If you include a PromptShow image in a post, the source code will be invisible to assistive
            technology — it will not be possible to enlarge or copy it, etc. Please, think about
            adding another element with the source code as text, like (
            <a
              className="link"
              href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details"
            >
              an HTML Details Element
            </a>
            ) below the image.
          </p>
          <h4 className="mb0 mt4" id="shortcuts">
            Keyboard Shortcuts
          </h4>
          <table className="mt2 mb3">
            <tbody>
              <tr>
                <td>Open settings menu</td>
                <td>
                  <kbd>⌘ /</kbd>
                </td>
              </tr>
              <tr>
                <td>Export as PNG</td>
                <td>
                  <kbd>⇧ ⌘ E</kbd>
                </td>
              </tr>
              <tr>
                <td>Export as SVG</td>
                <td>
                  <kbd>⇧ ⌘ S</kbd>
                </td>
              </tr>
              <tr>
                <td>Save snippet</td>
                <td>
                  <kbd>⌥ S</kbd>
                </td>
              </tr>
              <tr>
                <td>Copy image to clipboard</td>
                <td>
                  <kbd>⇧ ⌘ C</kbd>
                </td>
              </tr>
              <tr>
                <td>Reset settings</td>
                <td>
                  <kbd>⇧ ⌘ \</kbd>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div>
          <h2>Contact Information</h2>
          <p>
            <a className="link" href="https://github.com/langgptai/PromptShow">
               Email: ethereal_ai@hotmail.com
            </a>
          </p>
          <br />
        </div>
      </div>
      <style jsx>
        {`
          .about {
            font-size: 16px;
            max-width: 632px;
            margin: 0 auto var(--x4);
          }

          @media (max-width: 768px) {
            .about {
              max-width: 90vw;
            }
          }

          img {
            max-width: 100%;
          }

          h2 {
            font-weight: bold;
            font-size: 32px;
          }
          h4 {
            font-weight: bold;
          }

          p,
          li {
            color: #fff;
          }

          ul {
            list-style-position: inside;
            list-style-type: circle;
          }

          span {
            color: #fff;
          }

          td {
            padding: 0.25rem 0;
          }

          kbd {
            margin-left: var(--x3);
            letter-spacing: 0.1em;
          }
        `}
      </style>
    </Page>
  )
}
